<script lang="ts">
import {Vue, Component, Inject, InjectReactive, Watch} from 'vue-property-decorator';
import {
  BrandDetail,
  CommodityDetail,
  CommodityLicenseDetail,
  CommonResult,
  PartnerLicenseDetail,
  SimilarityItem
} from "../../plugins/dto";
import masterModal from "../../../../api/module/masterModal";
import {BusinessType} from "../../type";

@Component({})
export default class DataMatch extends Vue {
  checkList:string[] = ['cnName'];
  data:SimilarityItem[] = []
  responsive:boolean = true;
  @Inject("CommodityDetail")
  providedCommodityDetail!:CommodityDetail;

  @Inject("BrandDetail")
  providedBrandDetail!:BrandDetail

  @Inject("CommodityLicenseDetail")
  providedCommodityLicenseDetail!:CommodityLicenseDetail

  @Inject("PartnerLicenseDetail")
  providedPartnerLicenseDetail!:PartnerLicenseDetail

  @Inject("businessType")
  businessType!:BusinessType

  @Inject('modeType') injectedModeType!: {mode: string};

  keyword:string = ""
  loading:boolean =false
  selectedRow:any = {}
  @Watch("providedCommodityDetail", {immediate: true, deep: true})
  handleProvidedCommodityDetail(value:CommodityDetail){
   // 查询待匹配列表
    (this.getMatchDataList() as Promise<CommonResult<SimilarityItem[]>>).then((res:CommonResult<SimilarityItem[]>)=>{
      if(res.code === 200){
       this.data = res.data
      }
    })
  }
  @Watch("providedBrandDetail", {immediate: true, deep: true})
  handleProvidedBrandDetail(value:CommodityDetail){
    // 查询待匹配列表
    (this.getMatchDataList() as Promise<CommonResult<SimilarityItem[]>>).then((res:CommonResult<SimilarityItem[]>)=>{
      if(res.code === 200){
        this.data = res.data
      }
    })
  }
  isChecked(row:any) {
    // 检查当前行是否是选中的行
    console.log(22222, this.selectedRow.id === row.id)
    return this.selectedRow.id === row.id;
  }
  handleCheckboxChange(row:any) {
    this.responsive = !this.responsive
    // 如果当前行是已经选中的行，取消选择，否则将其设为选中
    if (this.selectedRow === row) {
      this.selectedRow = null;
    } else {
      this.selectedRow = row;
    }
  }
  getMatchDataList():Promise<CommonResult<SimilarityItem[]>>{
    this.loading = true
    let data:any ={}
    let matchFieldObj:{[key:string]:any} = {}
    if(this.businessType.businessType === 'commodity'){
      const {id, brandStandardCode, licenses} = this.providedCommodityDetail;
      data = {id, brandStandardCode, licenseStandardCode:licenses.map(i=>i.licenseStandardCode).join(",")}
      if(this.checkList.length){
        for(let i=0;i<this.checkList.length;i++){
          matchFieldObj[this.checkList[i]] = this.providedCommodityDetail[this.checkList[i] as keyof CommodityDetail];
        }
        data["matchField"] = matchFieldObj
      }
    }else if(this.businessType.businessType === "brand"){
      const { cnName, enName, companyName, id} = this.providedBrandDetail;
      data = {cnName, enName, companyName, id}
      if(this.checkList.length){
        for(let i=0;i<this.checkList.length;i++){
          matchFieldObj[this.checkList[i]] = this.providedBrandDetail[this.checkList[i] as keyof BrandDetail];
        }
        data["matchField"] = matchFieldObj
      }
    }else if(this.businessType.businessType === 'commodityLicense'){
      const {licenseCode, id} = this.providedCommodityLicenseDetail
      data = {licenseCode, id}
      if(this.checkList.length){
        for(let i=0;i<this.checkList.length;i++){
          matchFieldObj[this.checkList[i]] = this.providedCommodityLicenseDetail[this.checkList[i] as keyof CommodityLicenseDetail];
        }
        data["matchField"] = matchFieldObj
      }
    }else if(this.businessType.businessType === 'partnerLicense'){
      const {licenseCode, id} = this.providedPartnerLicenseDetail
      data = {licenseCode, id}
      if(this.checkList.length){
        for(let i=0;i<this.checkList.length;i++){
          matchFieldObj[this.checkList[i]] = this.providedPartnerLicenseDetail[this.checkList[i] as keyof PartnerLicenseDetail];
        }
        data["matchField"] = matchFieldObj
      }
    }

    if(this.keyword){
      data.keyword = this.keyword
    }
    let that = this
    return new Promise(resolve=>{
      masterModal.getSimilarityList(data, this.businessType.businessType).then((response)=>{
        that.loading = false
        resolve(response)
      })
    })
  }
  async handleSearch(){
    const res:CommonResult<SimilarityItem[]> = await this.getMatchDataList()
    if(res.code === 200){
      this.data = res.data
    }
  }

  async handleChange(){
    const res:CommonResult<SimilarityItem[]> = await this.getMatchDataList()
    if(res.code === 200){
      this.data = res.data
    }
  }

  handleSelectionChange(selection:SimilarityItem[] ){
    console.log(1111, selection)
    if(selection.length > 1){
      //@ts-ignore
      this.$refs.table.clearSelection()
      console.log(232323, selection, this.selectedRow)
      this.$nextTick(()=>{
        //@ts-ignore
        this.$refs.table.toggleRowSelection(this.selectedRow, true)
      })
    }else if(selection.length === 1){
      this.selectedRow = selection[0]
      //@ts-ignore
      this.$refs.table.toggleRowSelection(this.selectedRow, true)
    }
    this.$forceUpdate()
  }
  handleCurrentChange(currentRow:any, oldRow:any){
    // console.log(333, currentRow, oldRow)
  }
  handleSelectAll(){
    //@ts-ignore
    this.$refs.table.clearSelection()
  }
}
</script>

<template>
  <div>
    <div class="cc-modal-data-match-head">
      <div style="white-space: nowrap;margin-right: 20px;font-weight:700;color: #303133 ">主数据</div>
      <el-input
          placeholder="请输入商品名称、规格型号..."
          prefix-icon="el-icon-search"
          @keyup.enter.native="handleSearch"
          v-model="keyword"
          :disabled="injectedModeType.mode == 'preview'">
      </el-input>
      <div style="white-space: nowrap;margin-right: 5px;">
        匹配字段
      </div>
      <template v-if="businessType.businessType==='commodity'">
        <el-checkbox-group v-model="checkList" @change="handleChange" :disabled="injectedModeType.mode == 'preview'">
          <el-checkbox label="cnName">商品名称</el-checkbox>
          <el-checkbox label="specification">规格型号</el-checkbox>
          <el-checkbox label="articleNo">货号</el-checkbox>
          <el-checkbox label="minSaleUnit">基本单位</el-checkbox>
          <el-checkbox label="packageParam">包装参数</el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-if="businessType.businessType==='brand'">
        <el-checkbox-group v-model="checkList" @change="handleChange" :disabled="true">
          <el-checkbox label="cnName">品牌名称</el-checkbox>
<!--          <el-checkbox label="enName">英文名称</el-checkbox>-->
<!--          <el-checkbox label="companyName">品牌所属公司</el-checkbox>-->
        </el-checkbox-group>
      </template>
      <template v-if="['commodityLicense','foreignLicense','domesticRecord','foreignRecord'].includes(businessType.businessType)">
        <el-checkbox-group v-model="checkList" @change="handleChange" :disabled="injectedModeType.mode == 'preview'">
          <el-checkbox label="licenseCode">证照编号</el-checkbox>
          <el-checkbox label="specification">规格型号</el-checkbox>
          <el-checkbox label="productName">产品名称</el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-if="businessType.businessType==='partnerLicense'">
        <el-checkbox-group v-model="checkList" @change="handleChange" :disabled="injectedModeType.mode == 'preview'">
          <el-checkbox label="licenseCode">证照编号</el-checkbox>
          <el-checkbox label="specification">规格型号</el-checkbox>
          <el-checkbox label="productName">产品名称</el-checkbox>
        </el-checkbox-group>
      </template>
    </div>
    <div class="cc-modal-data-match-table" v-loading="loading">
      <el-table style="width:100%;height:100%"
                :data="data"
                ref="table"
                @selection-change="handleSelectionChange"
                highlight-current-row
                @current-change="handleCurrentChange"
                @select-all="handleSelectAll"
                v-if="businessType.businessType==='commodity'"
      >
        <el-table-column label="" width="40">
          <template slot-scope="scope">
            <el-checkbox
                :value="isChecked(scope.row)"
                :data-a="responsive"
                @change="handleCheckboxChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="标准编码" sortable prop="standardCode"></el-table-column>
        <el-table-column label="商品名称" sortable width="140" >
          <template slot-scope="scope">
            <el-tooltip :placement="'top'" effect="dark" :content="scope.row.cnName">
              <div style="max-width: 120px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{scope.row.cnName}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="规格型号" sortable prop="specification"></el-table-column>
        <el-table-column label="品牌" sortable prop="brandName"></el-table-column>
        <el-table-column label="货号" sortable prop="articleNo"></el-table-column>
        <el-table-column label="基本单位" sortable prop="minSaleUnitName"></el-table-column>
        <el-table-column label="包装参数" sortable prop="packageParam"></el-table-column>
        <el-table-column label="相似度" sortable prop="similarity"></el-table-column>
      </el-table>
      <el-table style="width:100%;height:100%"
                :data="data"
                ref="table"
                @selection-change="handleSelectionChange"
                highlight-current-row
                @current-change="handleCurrentChange"
                @select-all="handleSelectAll"
                v-if="businessType.businessType==='brand'">
        <el-table-column label="" width="40">
          <template slot-scope="scope">
            <el-checkbox
                :value="isChecked(scope.row)"
                :data-a="responsive"
                @change="handleCheckboxChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="品牌名称" sortable prop="cnName"></el-table-column>
        <el-table-column label="英文名称" sortable prop="enName" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="品牌所属公司" sortable prop="companyName"></el-table-column>
        <el-table-column label="相似度" sortable prop="similarity"></el-table-column>
      </el-table>
      <el-table style="width:100%;height:100%"
                :data="data"
                ref="table"
                @selection-change="handleSelectionChange"
                highlight-current-row
                @current-change="handleCurrentChange"
                @select-all="handleSelectAll"
                v-if="businessType.businessType==='commodityLicense'">
        <el-table-column label="" width="40">
          <template slot-scope="scope">
            <el-checkbox
                :value="isChecked(scope.row)"
                :data-a="responsive"
                @change="handleCheckboxChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="证照编号" sortable prop="licenseCode"></el-table-column>
        <el-table-column label="审批部门" sortable prop="approvalDepartment" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="产品名称" sortable prop="productName"></el-table-column>
        <el-table-column label="规格型号" sortable prop="specification"></el-table-column>
        <el-table-column label="相似度" sortable prop="similarity"></el-table-column>
      </el-table>
      <el-table style="width:100%;height:100%"
                :data="data"
                ref="table"
                @selection-change="handleSelectionChange"
                highlight-current-row
                @current-change="handleCurrentChange"
                @select-all="handleSelectAll"
                v-if="businessType.businessType==='partnerLicense'">
        <el-table-column label="" width="40">
          <template slot-scope="scope">
            <el-checkbox
                :value="isChecked(scope.row)"
                :data-a="responsive"
                @change="handleCheckboxChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="证照编号" sortable prop="licenseCode"></el-table-column>
        <el-table-column label="审批部门" sortable prop="approveDepartment" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="产品名称" sortable prop="productName"></el-table-column>
        <el-table-column label="规格型号" sortable prop="specification"></el-table-column>
        <el-table-column label="相似度" sortable prop="similarity"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.cc-modal-data-match-head{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 42px;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  ::v-deep .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
  ::v-deep .el-input{
    flex: 1;
    margin-right: 10px;
  }
  ::v-deep .el-input__icon{
    line-height: 32px;
  }
  ::v-deep .el-checkbox-group{
    flex: 2;
    text-align: left;
  }
  ::v-deep .el-checkbox{
    margin-right: 3px;
  }
}
.cc-modal-data-match-table{
  width: 100%;
  height: calc(100% - 42px);
  ::v-deep .el-table__cell.is-sortable{
    padding: 2px 0;
  }
  ::v-deep .el-table__body-wrapper{
    table{
      margin: 0 !important;
    }
    .el-table__cell{
      padding: 5px 0 !important;
    }
  }
  ::v-deep .el-table__header-wrapper{
    table{
      margin: 0 !important;
    }
  }
}
</style>